<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
    <link rel="stylesheet" href="./css/mediatyle.css"> 
    <link rel="stylesheet" href="./css/rest.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body class="___index___">
    <div id="app" v-cloak>
        <div class="top-nav">
            <img class="left-logo" v-if="!isShowInp" src="./images/logo.png" alt="">
            <div class="searchIup" v-else>
                <input type="text" v-model="searchVal">
                <i class="close" @click="isShowInp = false"></i>
            </div>
            
            <div class="right-content">
                <img class="search-icon" @click="showInp()" src="./images/search.png" alt="">
                <img class="nav-icon" @click="iShowNav = !iShowNav" src="./images/navIcon.png" alt="">
            </div>
        </div>
        <div class="popBox" v-if="iShowNav">
            <div class="pop-center">
                <img src="./images/cancel.png" @click="iShowNav=false" class="cancel" alt="">
                <p class="nav-item" @click="goIndexPage()">首页</p>
                <p v-for="(item,index) of navList" class="nav-item"  @click="goList(item)" :key="index">{{item.name}}</p>
            </div>
        </div>
        <div class="z-title">
            <div class="left-tit">
                {{parentName}}
            </div>
        </div>
        <div class="s-nav-list">
            <div 
                :class="currentIdx==index?'s-nav-item s-nav-item-on':'s-nav-item'" 
                v-for="(item,index) of childsList" 
                @click="checkNavIdx(index)"
                :key="index">
               
                {{item.name}}
            </div>
        </div>
        <div class="new-list" v-if="newsList[0]&&newsList[0]['name'] == '信息查询'">
            <div class="form-box">
                <div class="top">
                    证书查询
                </div>
                <div class="input-value">
                    <p>证书编号</p>
                    <input type="text" v-model="form.name">
                </div>
                <div class="input-value">
                    <p>证件号码</p>
                    <input type="text" v-model="form.idcard">
                </div>
                <div class="input-value">
                    <p>姓 名</p>
                    <input type="text" v-model="form.certificateNo">
                </div>
                <div class="btn" @click="searchCard()">查询</div>
                <p class="tips">注：以上三项输入任意两项即可查询</p>
            </div>
            <div class="result-box" v-if="isShowMsg">
                <div class="result-tit">
                    证书查询结果
                </div>
                <div v-for="(item,index) in msgList" :key="index">
                    <div class="info-tit">证书信息</div>
                    <div class="result-list">
                        <div class="result-item">
                            <span>证书类型:</span>
                            <span>{{item.type}}</span>
                        </div>
                        <div class="result-item">
                            <span>证书编号:</span>
                            <span>{{item.certificateNo}}</span>
                        </div>
                        <div class="result-item">
                            <span>姓名:</span>
                            <span>{{item.name}}</span>
                        </div>
                        <div class="result-item">
                            <span>身份证号:</span>
                            <span>{{item.idcard}}</span>
                        </div>
                        <div class="result-item">
                            <span>证书名称:</span>
                            <span>{{item.certificateName}}</span>
                        </div>
                        <div class="result-item">
                            <span>证书等级:</span>
                            <span>{{item.grade}}</span>
                        </div>
                        <div class="result-item">
                            <span>签发机构:</span>
                            <span>{{item.certificateOrg}}</span>
                        </div>
                        <div class="result-item">
                            <span>签发日期:</span>
                            <span>{{item.certificateTime}}</span>
                        </div>
                        <div class="result-item">
                            <span>证书有效期:</span>
                            <span>{{item.certificateValid}}</span>
                        </div>
                        <div class="result-item">
                            <span>证书照片:</span>
                            <span style="color: #5FAF71;" @click="openImg(item.url)">点击查看</span>
                        </div>
                    </div>
                </div>
         
            </div>
        </div>
        <div  class="new-list" v-else>
            <div 
                class="new-item" 
                v-for="(item,index) of newsList" 
                @click="goDetails(item)"
                :key="index">
                {{item.title}}
            </div>
            <p v-if="maxpage>params.pageNum" class="loading" @click="loadMore()">点击加载更多</p>
            <p v-else class="loading">没有更多了</p>
        </div>
        <div class="footer-box" style="position: absolute;bottom:0;width: 100%;">
            <div class="footer-bottom">
                <p>© 2024 数字经济公共服务平台 版权所有</p>
                <p><a href="https://beian.miit.gov.cn/">赣ICP备2024036929号</a></p>
                <!-- <p>技术支持：xx科技有限公司</p> -->
            </div>
        </div>
        <div class="tips-pop" v-if="isShwotips">
            <div class="tip-msg">{{tipMsg}}</div>
        </div>
        <div class="zs-pop" v-if="isShowCard">
            <img class="card" :src="cardImg" alt="">
            <img src="./images/close.png" @click="isShowCard = false" class="close" alt="">
        </div>
    </div>
    <script src="./js/rem_count.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/config.js"></script>
    <script>
        new Vue({
                el: '#app',
                data() {
                    return {
                        baseUrl,
                        navList:[],
                        isShowInp:false,
                        iShowNav:false,
                        navId:null,
                        childsId:null,
                        childsList:[],
                        currentIdx:0,
                        parentName:'',
                        newsList:[],
                        searchVal:'',
                        params:{
                            pageNum:1,
                            pageSize:5,
                            categoryId:null,
                        },
                        loading:true,
                        maxpage:null,
                        isShwotips:false,
                        isShowCard:false,
                        isShowMsg:false,
                        tipMsg:'',
                        msgList:[],
                        cardImg:'',
                        form:{
                            name:'',
                            idcard:'',
                            certificateNo:''
                        }
                    }
                },
                mounted(){
                    this.$nextTick(() => {
                        this.getNavList()
                        const urlParams = new URLSearchParams(window.location.search);
                        const id = urlParams.get('id');
                        const title = urlParams.get('title');
                        this.parentName = title
                        this.getchildsNav(Number(id))
                    })
                },
                methods:{
                    getNavList(){
                        axios.post(this.baseUrl+'index/getCategory', {})
                        .then( (res)=> {
                            this.navList = res.data.data
                        })
                        .catch( (error)=> {
                            console.log(error);
                        });
                    },
                    showInp(){
                        if(this.isShowInp){
                            window.location.href = './search.html?title='+this.searchVal
                        }else{
                            this.isShowInp = true
                        }
                    },
                    getchildsNav(id){
                        
                        axios.post(this.baseUrl+'index/getChildCategory', {categoryId:id})
                        .then( (res)=> {
                            
                            
                        //     params:{
                        //     pageNum:1,
                        //     pageSize:1,
                        //     categoryId:null,
                        // },
                            this.childsList = res.data.data
                            this.childsId = res.data.data[0]['id']
                            this.getChildsList(this.childsId)
                           
                        })
                        .catch( (error)=> {
                            console.log(error);
                        });
                    },
                    getChildsList(categoryId){
                        
                        this.params.categoryId = categoryId
                        axios.post(this.baseUrl+'index/queryArticleByCategoryId', this.params)
                        .then( (res)=> {
                            
                            this.newsList = this.newsList.concat(res.data.data.list)
                            console.log(this.newsList,' console.log(this.newsList)')
                            this.maxpage = res.data.data.pages
                        })
                        .catch( (error)=> {
                            console.log(error);
                        });
                    },
                    loadMore() {
                        this.params.pageNum +=1
                        this.getChildsList(this.childsId)
                        // 这里是加载更多的逻辑
                    },
                    checkNavIdx(idx){
                        this.newsList = []
                        this.params.pageNum = 1
                        this.currentIdx = idx
                        this.childsId = this.childsList[idx]['id'];
                        this.getChildsList(this.childsId)
                    },
                    goDetails(item){
                        window.location.href = './details.html?id='+item.id
                    },
                    goList(item){
                        window.location.href = './list.html?title='+item.name+'&id='+item.id
                    },
                    goIndexPage(){
                        window.location.href = './index.html'
                    },
                    searchCard(){
                        const emptyPropertiesCount = this.countEmptyProperties(this.form);
                        if(emptyPropertiesCount>1){
                            this.isShwotips = true
                            this.tipMsg = '至少输入2个查询条件！'
                            setTimeout(()=>{
                                this.isShwotips = false
                            },3000)
                        }else{
                            
                            axios.post(this.baseUrl+'index/searchCert', this.form)
                            .then(res=>{
                              
                                if(res.data.code == 200){
                                    this.isShowMsg = true
                                    this.msgList = res.data.data
                                }
                            })
                        }

                    },
                    countEmptyProperties(obj) {
                        let count = 0;
                        for (let prop in obj) {
                            if (obj.hasOwnProperty(prop) && obj[prop] === '') {
                            count++;
                            }
                        }
                        return count;
                    },
                    openImg(url){
                        this.cardImg = url
                        this.isShowCard= true
                    }
                }
        })
    </script> 
</body>

</html>